<!-- 评论组件 -->

<template>
  <view class="comment-box">
    <view class="comment-input">
      <input 
        type="text" 
        placeholder="写下你的评论..." 
        v-model="content"
        class="input"
      >
      <button class="send-btn" @click="handleSend">发送</button>
    </view>
    <view class="comment-list" v-if="comments.length">
      <view class="comment-item" v-for="(item, i) in comments" :key="i">
        <view class="user-info">
          <image :src="item.avatar" class="avatar" mode="widthFix"></image>
          <text class="username">{{ item.username }}</text>
        </view>
        <view class="comment-content">{{ item.content }}</view>
        <view class="comment-actions">
          <text class="time">{{ item.time }}</text>
          <text class="like" @click="handleLike(i)">
            <image 
              src="/static/icons/like.png" 
              mode="widthFix"
              :class="{ active: item.liked }"
            ></image>
            <text>{{ item.likeCount }}</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    comments: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleSend() {
      if (!this.content.trim()) return
      // 触发父组件提交评论
      this.$emit('send', this.content)
      this.content = ''
    },
    handleLike(index) {
      this.$emit('like', index)
    }
  }
}
</script>

<style scoped>
.comment-input {
  display: flex;
  gap: 15rpx;
  padding: 15rpx;
  background-color: #fff;
  border-top: 1px solid var(--border-color);
}
.input {
  flex: 1;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 0 25rpx;
  font-size: 26rpx;
}
.send-btn {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: var(--primary);
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.comment-list {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}
.comment-item {
  padding-bottom: 25rpx;
  border-bottom: 1px solid var(--border-color);
}
.user-info {
  display: flex;
  align-items: center;
  gap: 15rpx;
  margin-bottom: 10rpx;
}
.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
.username {
  font-size: 28rpx;
  font-weight: 500;
}
.comment-content {
  font-size: 26rpx;
  margin-bottom: 10rpx;
  line-height: 1.5;
}
.comment-actions {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #909399;
}
.like image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 5rpx;
  vertical-align: middle;
}
.like.active image {
  tint-color: #f56c6c;
}
</style>
